import CardTitle from '@/components/CardTitle';
import { conductTopicProject } from '@/services/api/api-home';
import { Link } from '@umijs/max';
import { Avatar, Card, Empty, Typography } from 'antd';
import moment from 'moment';
import { useEffect, useRef, useState } from 'react';
import styles from '../../style.less';
import { ActionType, ProList } from '@ant-design/pro-components';
import { pageCuesTopic } from '@/services/api/api-cues-topic';
import TableTableTopicRenderDetails from '@/pages/cues/topic/topic/table/TableTopicRenderDetails';
import RcResizeObserver from 'rc-resize-observer';
interface ConductTopicObserverProps {
  value?: any;
  onChange?: (value: any) => void;
}

const ConductTopicObserver: React.FC<ConductTopicObserverProps> = ({ value, onChange }) => {
  const [responsive, setResponsive] = useState(false);
  /**
   * 进行中的选题计划数据源
   */
  const [conductTopicData, setConductTopicDataState] = useState<CuesTopicData.TopicPage[]>([]);
  const userRefList = useRef<ActionType>();
  useEffect(() => {
    conductTopic();
  }, []);

  const conductTopic = async () => {
    const response = await conductTopicProject();
    if (response.code == 0) {
      setConductTopicDataState([...response.data.data]);
      // setConductTopicDataState([])
    }
  };
  /**
    * 请求网络
    * @param value
    */
  const request = async (params = {}) => {
    const response = await pageCuesTopic({ pageSize: 10, current: 1, mode: 1, run: 1 });
    return Promise.resolve({
      data: response.data.data,
      total: response.data.total,
      success: response.code === 0,
    });
  };
  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(offset) => {
        setResponsive(offset.width < 1024);
      }}
    >
      <Card
        className={styles.projectList}
        style={{ marginBottom: 24 }}
        title={<CardTitle>进行中的选题计划</CardTitle>}
        bordered
        extra={<Link to="/cues">全部</Link>}
        bodyStyle={{ padding: 0 }}
      >
        <ProList<CuesTopicData.TopicPage>
          header={false}
          headerTitle={false}
          style={{ padding: 10 }}
          // ghost={false}
          // itemCardProps={{
          //   ghost: false,
          // }}
          actionRef={userRefList}
          request={request}
          showActions="hover"
          grid={{ gutter: 18, column: responsive ? 2 : 3 }}
          onItem={(record: any) => {
            return {
              onMouseEnter: () => { },
              onClick: () => { },
            };
          }}
          renderItem={(item: CuesTopicData.TopicPage, index: number) => {
            return (
              <TableTableTopicRenderDetails
                item={item}
                onRefurbish={() => {
                  userRefList.current?.reload();
                }}
                triggerMode="card"
                title={item.name}
              />
            );
          }}
          rowKey={'id'}
          toolBarRender={false}
        />
      </Card>
    </RcResizeObserver>
  );
};

export default ConductTopicObserver;
